<template>
	<view>
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<view class="head">
			<image src="../../static/images/arrow_left.png" mode="" @click="$back()"></image>
			<view class="">客户：{{ name }}</view>
			<view class="f32" @click="allaw">全选</view>
		</view>
		<view class="" v-for="(item, index) in ate">
			<view class="number">
				<view class="numberLeft">订单号：{{ order_no }}</view>
				<view class="numberRight">{{ create_time | birtime }}</view>
			</view>
			<view class="photo">
				<view class="photoHead">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="photoCenter">
					<view class="photoTop">{{item.goods_no}}(商品名）</view>
					<view class="photobot">欠:{{qian(item)}}</view>
				</view>
				<view class="photoRight">
					<view class="photoTop">
						<image :src="item.all == true ? '../../static/client/butt2.png' : '../../static/client/butt1.png'" mode="" @click="selectedCheck(index)"></image>
						全部发货
					</view>
					<view class="photobot" @click="ShowBox(index)">
						{{ item.show == false ? '收起' : '展开' }}
						<image :src="zhanImage" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box" v-show="item.show">
				<view class="boxTop">
					<view class="boxLeft">规格(库存）</view>
					<view class="boxCenter">欠货</view>
					<view class="boxRight">退欠货数</view>
				</view>
				<view class="boxbot" v-for="(child, indexs) in item.product_list">
					<view class="boxLeft">{{ child.spec_data[0] + '/' + child.spec_data[1] }}</view>
					<view class="boxCenter">{{ child.owe_num }}</view>
					<view class="boxRight">
						<stepper style="float: right;" :defaultValue="item.all==true?child.number:0" size="small" :min="0" :max="child.owe_num"
						 :childindex="index" @change="changeNum"></stepper>
					</view>
				</view>

			</view>
			<view class="but">
				<view class="butLeft">本次发货总数:{{ade}}</view>
				<button type="primary" @click="gowuliu">去发货</button>
			</view>
		</view>


	</view>
</template>

<script>
	// import stepper from '../../components/stepper/stepper.vue';
	// import {
	// 	mapState
	// } from 'vuex'
	export default {
		data() {
			return {
				ImageUrl: '../../static/client/butt1.png', //图片地址
				Check: false, //选中
				showZhan: '展开',
				zhanImage: '../../static/slice/1.png',
				arry: '',
				name: '',
				customer_id: '',
				add: '',
				show: {},
				sum: 0,
				fatherIndex: '',
				ate: [],
				order_id: '',
				create_time: '',
				ade: 0
			};
		},
		onShow(e) {
		
			this.arry = uni.getStorageSync('User');
				console.log(this.arry);
			this.name = this.arry.name;
			this.customer_id = this.arry.customer_id;
			this.showShop();
			this.ate = uni.getStorageSync('ate')
			this.ate.forEach(item => {
				item.all = false;
			});
			this.ate.forEach(item => {
				item.product_list.forEach(item => {
					item.number = 0;
				});
			});
		},

		methods: {
			changeNum(e) {
				this.ate[e.childindex].product_list[0].number = e.num
				this.allNumber()
			},
			// 总数
			allNumber() {
			
				let c = 0
				this.ate.forEach((item, index) => {
					item.product_list.forEach(item => {
						c =+item.number+c
					});
				})
				console.log(c);
				this.ade = c
			},
			// 全选
			selectedCheck(inedx) {
				this.ate[inedx].all = !this.ate[inedx].all;
				this.$set(this.ate, inedx, this.ate[inedx]);
				if (this.ate[inedx].all == true) {
					this.ate[inedx].product_list.forEach(item => {
						item.number = item.owe_num;
						// console.log(item.number);
					});
				} else {
					this.ate[inedx].product_list.forEach(item => {
						item.number = 0;
					});
				}
			},

			qian(item) {
				let c = 0
				item.product_list.forEach(item => {
					c = item.owe_num + c
				})
				return c
			},
			ShowBox(index) {
				this.ate[index].show = !this.ate[index].show;
				this.$set(this.ate, index, this.ate[index]);
			},
			gowuliu() {
				uni.navigateTo({
					url: 'logistics'
				})
				uni.setStorage({
					key: "khid",
					data: this.arry.customer_id
				})
				uni.setStorage({
					key: "order_id",
					data: this.order_id
				})
				uni.setStorage({
					key: "fahuo",
					data: this.ate
				})
			},
			allaw() {
				console.log(this.ate);
				if (this.sum == 0) {
					this.ate.forEach((item, index) => {
						item.all = true;
						this.$set(this.ate, index, item);
					});
					this.ate.forEach(item => {
						item.product_list.forEach(item => {
							item.number = item.owe_num;
							console.log(item.owe_num);
						});
					});
					console.log(this.show);
					this.$set(this.show);
					this.sum = 1;
				} else {
					this.ate.forEach((item, index) => {
						item.all = false;
						this.$set(this.ate, index, item);

					});
					this.ate.forEach((item, index) => {
						// item.goods_list[0].product_list.forEach(item => {
						// 	item.number = 0;
						// });
						item.product_list.forEach(item => {
							item.number = '0';
						});
					});
					this.sum = 0;
				}
			},

			showShop() {
				this.$ajax('api/v1.order/owe', {
						customer_id: this.customer_id
					})
					.then(res => {
						this.order_no = res.result.page_list[0].order_no
						this.order_id = res.result.page_list[0].order_id
						this.create_time = res.result.page_list[0].create_time
						this.show = res.result.page_list;
						this.show.forEach(item => {
							item.show = false;
						});
						this.show.forEach(item => {
							item.all = false;
						});
						this.show.forEach(item => {
							item.goods_list[0].product_list.forEach(item => {
								item.number = 0;
							});
						});
						// console.log(this.show);
					})
					.catch(res => {
						console.log(Error);
					});
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f7f4f8;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.head {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #249af6;
		color: #ffffff;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;

		image {
			width: 22rpx;
			height: 39rpx;
			margin-top: 25rpx;
		}
	}

	.number {
		height: 103rpx;
		line-height: 103rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 30rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		border-bottom: 2rpx solid #eeeeee;

		.numberRight {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}

	.photo {
		height: 164rpx;
		background-color: #ffffff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.photoHead {
			height: 100rpx;
			width: 100rpx;
			// background-color: blue;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.photoCenter {
			margin-left: 36rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 36rpx;
		}

		.photobot {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 88rpx;
		}

		.photoRight {
			margin-left: 180rpx;

			.photoTop {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);

				image {
					width: 32rpx;
					height: 32rpx;
					position: relative;
					left: -20rpx;
					top: 5rpx;
				}
			}

			.photobot {
				text-align: right;
				color: #249af6;

				image {
					width: 17rpx;
					height: 10rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.box {

		// height: 212rpx;
		.boxTop {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #eeeeee;
			display: flex;
			justify-content: space-between;
			padding: 0 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			border-bottom: 2rpx solid #cccccc;
		}

		.boxbot {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #eeeeee;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-family: PingFang SC;
			padding: 0 100rpx;
			color: #666666;
			font-weight: 500;

			.boxCenter {
				position: relative;
				left: 110rpx;
			}

			.boxRight {
				box-sizing: border-box;
				padding-top: 30rpx;
				padding-left: 20rpx;
				position: relative;
				left: 30rpx;
			}
		}
	}

	.but {
		width: 100%;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		display: flex;
		box-sizing: border-box;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 110rpx;
		padding-left: 29rpx;

		.butLeft {
			width: 495rpx;
			background-color: #ffffff;
		}

		button {
			line-height: 110rpx;
			flex: 1;
			font-size: 30rpx;
		}
	}
</style>
